<template>
  <div class="search-content">
    <div class="search-inner">
      <div class="search-keyword">
        <i class="el-icon-search icon"></i>
        <template v-solt="{row,$index}">
          <input v-model="keyword" class="search-input" placeholder="搜索关键词" />
          <span v-show="keyword===''?isshowKey:!isshowKey" @click="handleClick(keyword)">搜索</span>
        </template>
        <i class="el-icon-close icon" @click="goBack"></i>
      </div>
      <!--历史记录 -->
      <div class="search-history">
        <p class="search-title">搜索历史</p>
        <div>
          <span
            class="search-tag"
            v-for=" item in historyList"
            :key="item"
            @click=" handleClick(item)"
          >{{item}}</span>
        </div>
      </div>
      <!-- 热门 -->
      <div class="search-hot">
        <p class="search-title">热门</p>
        <span class="search-tag">Python</span>
        <span class="search-tag">算法</span>
        <span class="search-tag">城征译者</span>
        <span class="search-tag">机器学习</span>
        <span class="search-tag">Java</span>
        <span class="search-tag">数学</span>
        <span class="search-tag">C语言</span>
        <span class="search-tag">sql</span>
        <span class="search-tag">最新上线</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Search",
  data() {
    return {
      mateList: {},
      keyword: "",
      isshowKey: false,
      historyList: [],
    };
  },
  mounted() {
    // const res = await reqGetHotMate(`?editableareaname=热门标签`);
    // console.log(res);
    // this.mateList = res.data;
    //判断本地是否有储存到数据，有数据就直接赋值给到historylist
    if (JSON.parse(localStorage.getItem("historyList"))) {
      this.historyList = JSON.parse(localStorage.getItem("historyList"));
    }
  },
  methods: {
    //搜索
    get_search() {
      if (this.keyword == "") {
        this.$toast("请输入搜索内容");
        return false;
      } else {
        // 没有搜索记录，把搜索值push进数组首位，存入本地
        if (!this.historyList.includes(this.keyword)) {
          this.historyList.unshift(this.keyword);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        } else {
          //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
          let i = this.historyList.indexOf(this.keyword);
          console.log(i);
          this.historyList.splice(i, 1);
          this.historyList.unshift(this.keyword);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        }
      }
    },
    handleClick(item) {
      //跳转到搜索的结果页面
      this.$router.history.push({
        path: "/book",
        query: {
          q: item,
        },
      });
      this.get_search();
    },

    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.search-content {
  width: 100%;
  
}
.search-inner {
  width: 80%;
  margin: 268px;
  max-width: 1000px;
  overflow: hidden;
  margin: 0 auto;
}
.search-keyword .icon {
  position: fixed;
  top: 35px;
  font-size: 20px;
}
.search-keyword span {
  /* display: none; */
  color: royalblue;
  padding: 0 10px;
}
.search-input {
  border: none;
  width: 896px;
  height: 50px;
  line-height: 50px;
  outline: none;
  margin: 20px 20px;
}

/* 历史记录  */
.search-title {
  font-size: 16px;
  font-weight: bolder;
  margin-bottom: 10px;
}
.search-tag {
  display: inline-block;
  width: 80px;
  height: 30px;
  border: 1px solid #a1adc5;
  text-align: center;
  line-height: 30px;
  margin: 10px 10px;
  border-radius: 20px;
}
</style>
